<template>
  <div class="audition294">
    <p>高阶组件HOC---不是 React API 的一部分，是基于 React 的组合特性形成的设计模式。</p>
    <p>高阶组件是参数为组件，返回值为新组件的函数（将组件转换为另一个组件，纯函数，无副作用）</p>
    <p><br></p>
    <p>受控组件:</p>
    <p>在表单元素中，state是唯一数据源，渲染表单的React组件控制着用户输入过程中表单发生的操作。<br/>被React以这种方式控制取值的表单输入元素叫做受控组件</p>
    <p>如input textarea select</p>
    <p><br></p>
    <p>非受控组件:</p>
    <p>表单数据由DOM节点来处理，而不是用state来管理数据，一般可以使用ref来从DOM节点中获取表单数据</p>
    <p>如 &lt;input type="file" /&gt;</p>
    <hr>
    <p>区别：</p>
    <p>1. 受控组件和非受控组件是表单中的组件，高阶组件相当于对某个组件注入一些属性方法</p>
    <p>2. 高阶组件是解决代码复用性问题产生的技术</p>
    <p>3. 受控组件必须要有一个value，结合onChange来控制这个value，<br />取值为event.target.value/event.target.checked</p>
    <p>4. 非受控组件相当于操作DOM，一般有个defaultValue，通过onBlur触发响应方法</p>
  </div>
</template>

<script>
export default {
  name: 'Audition294'
}
</script>

<style>

</style>